今天開始，我們就要來進行昨天所提到的成品實作篇拉，而且這次會一步步的帶各位從頭開始，不再只是講解流程而已了，過程中我們還是會碰到一些可能不熟悉的動作，但相對的使用上都比較簡單，而且我也會稍作補充，那就讓我們開始吧～

事前規劃

沒錯，又是這個步驟，每次開始製作東西之前都要先規劃好要做什麼，我們這一次要製作的是一個射飛鏢的小遊戲，之前的成品是在現有的遊戲架構之下，安排遊戲中的各種角色、物件、流程完成的，但這次已經沒有遊戲架構把我們撐起來了，所以大部分的東西都得重新設計，雖然射飛鏢相比之前的成品看起來單純了不少，但由於是從零開始，所以會用到的技巧反而會多更多。

接著讓我們來談談遊戲的架構，一開始我想要有個主畫面，顯示遊戲的名稱，並且有文字提示：「點擊後開始遊戲」，點擊後就會有文字倒數 3、2、1 便開始，然後畫面上就會出現 飛鏢、標靶、分數、計時，主要這四個部分，然後點擊飛鏢滑動出去後就可以射出飛鏢，只要飛鏢擊中標靶分數就會增加，並且標靶會改變自身的位置，直到時間結束後便會結算分數，並將分數上傳到排行榜中，回到主畫面，以此讓玩家可以重新遊玩。

然後讓我們來談談細節的部分，由於我想要讓這個遊戲在手機上也能夠運行，所以遊戲的舞台會是一般手機尺寸的大小，這樣只要用手機打開成品網頁也可以遊玩，甚至還有免費的工具可以將該網頁變成一個 APP，聽起來是不是很酷。

接著是開場的文字倒數，從前幾天的建立圖片佈局可以看到，我們能夠在舞台上新增顯示文字，但那只不過是放置一個文字框而已，沒有任何動態效果，如果我們就只是這樣改變它的文字內容，看起來就很無聊、死板，所以我們會利用一個小功能來讓文字看起來有動態的效果。

再來就是飛鏢、標靶的圖片素材了，這個部分原則上只有兩種方法，一是自己畫，二是尋找免費的素材，不過由於射飛鏢其實是我剛回到 CG 時做的第二個小遊戲，雖然沒有做完整，但那時畫的素材還是流傳了下來，所以這個部分就不用擔心了。

最後是關於音樂與音效的部分，一款遊戲總不可能一點聲音都沒有，例如背景音樂、結束音效、標靶被擊中的音效等，但這畢竟不是每個人都有辦法自己創作的部分，所以屆時我也會跟各位介紹一些我比較常去的免費素材網站，只要遵守網站上的規定，大部分的素材都是可以直接下載使用的。

那麼已經規劃的差不多了，就讓我們來動手操作吧！

開始前設定

前幾天我們已經重新建立了一個新專案，我們就用這個新專案來製作吧！首先打開 game.events 確保事件表裡面空空如也，接著打開事件表的 設定，這裡是我們第一次進來，裡面可以調整遊戲的舞台大小、背景顏色等，其他設定通常都不會需要變動。

我們剛剛有提到為了在手機上也可以遊玩，所以要調整成符合手機尺寸的大小，經過我隨意的搜尋了一番，發現了一個 640 x 960 的大小，感覺還不錯，所以我的 寬 就是 640，高 為 960，不過這個部分看各位的喜好即可，或是要為你們的手機尺寸量身打造也可以。

然後 背景顏色 我一般最常使用黑色，也就是 #000000，這個是十六進制表示的黑色，在事件表中應該會滿常看到的，沒有學過的人可以先看看就好。

都設定好之後就可以點擊綠勾儲存，這時測試遊戲就會發現真的是一片黑，什麼都看不到，所以我們要來畫一個遊戲背景。

建立遊戲背景

讓我們建立一個叫做 初始化 的事件，並新增動作 建立圖層佈局，從這裡就可以看到我們遊戲舞台的樣子了，視窗左下方可以縮放舞台大小，總之我們要來新增一個背景顏色，我在設定裡設置的黑色背景，是為了讓遊戲舞台以外的地方呈現黑色，並不是為了讓遊戲本身的背景是黑色喔！

首先我們點選右方資源裡的 +形狀，並選擇 方形，因為作為背景的關係，所以我將其命名為 background，接著將其 寬、高 改成對應遊戲舞台的大小，例如我就是 640 和 960，接著 圓角 的設定是為了讓方形的四個角具有弧度，但由於我們是為了充當背景使用，所以不需要這個設定，因此將它改成 0。

接著就是背景的顏色了，由於主題是射飛鏢，感覺很適合在一片草地上，所以我選擇了綠色（#55ee55），框顏色 則選擇了一個更深的綠色（#55aa55），顏色的選擇除了使用選擇器以外，也可以直接通過輸入去改變顏色。

最後，讓我們在 圖層的ID 欄位定義一個 ID，由於在本次的示範中，遊戲中的顯示物件總共分為兩大類，第一種就是如同場景、飛鏢、標靶這類的遊戲物件，第二種則是遊戲標題、倒數、分數、計時這種顯示文字的遊戲 UI，也就是遊戲介面，遊戲介面一般來說始終都是在最上層的，除了某些打破第四面牆的遊戲，不然一般很難看到會有遊戲物件跑一跑，突然把訊息、按鈕擋住的吧？

為此我們要將這兩類的物件分別放在不同的圖層，而我們現在所做的就是屬於遊戲物件圖層的部分，所以我將圖層 ID 定義為 gameRoot，之後若有新增 UI 圖層時，則定義為 uiRoot，並且會放在 gameRoot 上方。

好了之後就可以儲存動作，並再次測試看看，此時就可以看到遊戲中央多出了我們剛剛設置的遊戲背景，這就是我們的舞台大小，然後我們還可以嘗試改變視窗的大小，會發現舞台能夠根據視窗的大小去做改變。

CG 範例事件表

總結

今天主要是針對我們接下來這幾天的實作，做一個簡單的事前規劃，大概從遊戲的開始，到結束，以及過程中會需要用到哪些東西去做構想，之後簡單的設置了一些跟舞台相關的設定，明天我們應該會從飛鏢的部分開始著手，實作陰影，以及滑鼠互動的部分。

對了，最後的最後就給各位看看我們大致上會做出什麼樣的東西吧！不過這並不是完成品，只有演示射飛鏢的過程而已。